<!-- 任务 [ html ] -->
<template>
  <div class="home">
    <div class="search">
      <div class="searchbtn">
        <input v-model="searchGoodsObjData.goodsName" type="text" placeholder="输入商品标题搜索">
        <img src="../../../../static/images/Magnifier.png">
      </div>
      <div class="info" @click="setStatus(1)">
        <h1>部门</h1>
        <div class="right">
          <span>{{ searchGoodsObjData.deptNbr.value | changekong }}</span>
          <i class="el-icon-arrow-right" />
        </div>
      </div>
      <div class="info" @click="customData.countShow = true">
        <h1>序号</h1>
        <div class="right">
          <span>{{ searchGoodsObjData.serialNbr }}</span>
          <i class="el-icon-arrow-right" />
        </div>
      </div>

      <div class="info" @click="setStatus(2)">
        <h1>陈列方式</h1>
        <div class="right">
          <span>{{ searchGoodsObjData.fixtureMode.value | changekong }}</span>
          <i class="el-icon-arrow-right" />
        </div>
      </div>
      <div class="info" @click="setStatus(3)">
        <h1>促销类型</h1>
        <div class="right">
          <span>{{ searchGoodsObjData.salesType.text | changekong }}</span>
          <i class="el-icon-arrow-right" />
        </div>
      </div>
      <div v-if="searchGoodsObjData.chooseType == 1&&searchGoodsObjData.displayStatus.value==3&&searchGoodsObjData.auditStatus.value==2" class="info" @click="setStatus(4)">
        <h1>提交总部</h1>
        <div class="right">
          <span>{{ searchGoodsObjData.submitHoro.value | changesubmitHoro }}</span>
          <i class="el-icon-arrow-right" />
        </div>
      </div>
      <div v-if="searchGoodsObjData.chooseType == 2" class="info" @click="setStatus(5)">
        <h1>状态</h1>
        <div class="right">
          <span>{{ searchGoodsObjData.displayStatus.value | changedisplayStatus }}</span>
          <i class="el-icon-arrow-right" />
        </div>
      </div>
    </div>
    <div class="submit flex-cc">
      <div class="btn btn_reset" style="margin-right:5px;" @click="reset">重置</div>
      <div class="btn" style="margin-left:5px;" @click="search">搜索</div>
    </div>
    <WPTX_PICKER :show="show" :link="link" :columns="columns" :default-data="defaultData" :select-data="pickData" @cancel="close" @confirm="confirmFn" />

    <!-- NAV Info START -->
    <template>
      <WPTX_ADDGOODS :show="addgoodsShow" :depart-items-d-t-o-list="departItemsDTOList" @confirm="getDepartItemsList" @cancle="setcancles" />
    </template>
    <!-- NAV Info E N D -->
    <template>
      <el-dialog title="序号" :visible.sync="customData.countShow" center="center">
        <div class="xh flex-ss">
          <p>序号</p>
          <el-input v-model="searchGoodsObjData.serialNbr" />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="customData.countShow = false">确定</el-button>
        </div>
      </el-dialog>
    </template>
  </div>
</template>
<script>



import Vue from 'vue'
import axios from 'axios'
import $ from 'jquery'
import VueResource from 'vue-resource'
import _validate from '../commonJs/wptx_validate'
import _tools from '../commonJs/wptx_tools'
import _common from '../commonJs/wptx_common'
import _storewxtaskAPI from '../API/storewxtaskapi'
import _taskstoreitemapi from '../API/taskstoreitemapi'
import WPTX_PICKER from '../commonTemplate/picker'
import WPTX_ADDGOODS from '../commonTemplate/wptx_addgoods'
import {
  years,
  month,
  day,
  hours,
  minutes,
  seconds
} from '../commonTemplate/lib/data'
const _FUNCTION_NAME = _common.pageName.WPTXTASKLISKCHOOSE
const _ROUTER_NAME = _common.router.TASTLIST
export default {

  /*              页面引用的通用模板 START              */

  components: {
    WPTX_PICKER: WPTX_PICKER,
    WPTX_ADDGOODS: WPTX_ADDGOODS
  },
  filters: {
    changekong(val) {
      if (val == -1) {
        return ''
      } else {
        return val
      }
    },
    changesubmitHoro(val) {
      switch (parseInt(val)) {
        case -1:
          return ''
        case 0:
          return '未提交'
        case 1:
          return '已提交'
      }
    },
    changedisplayStatus(val) {
      switch (parseInt(val)) {
        case -1:
          return ''
        case 0:
          return '待分配'
        case 1:
          return '未陈列'
        case 2:
          return '已陈列'
        case 3:
          return '无法陈列'
        case 4:
          return '拍照商品'
        case 5:
          return '全部'
      }
    }
  },



  data() {



    return {

      tableData: {
        taskList: []
      },

      /*  picker 组件绑定数据  start  */
      show: false,
      columns: 1,
      link: true,
      defaultData: [],
      // 第一列的数据结构
      pickData: {
        data1: years,
        data2: month,
        data3: day,
        data4: hours,
        data5: minutes,
        data6: seconds
      },
      /*  picker 组件绑定数据  end  */
      searchResultvData: {
        chooseType: 1, // 1是执行事项 2是商品列表
        auditStatus: '', // 是否审核状态
        goodsName: '', // 商品名称
        deptNbr: '', // 部门
        serialNbr: '', // 序号
        fixtureMode: '', // 陈列方式
        salesType: '', // 促销类型
        submitHoro: '', // 提交总部
        displayStatus: ''// 商品状态
      },

      searchGoodsObjData: {
        chooseType: 1, // 1是执行事项 2是商品列表
        auditStatus: { text: '请选择', value: -1 }, // 是否审核状态
        goodsName: '', // 商品名称
        deptNbr: { text: '请选择', value: -1 }, // 部门
        serialNbr: '', // 序号
        fixtureMode: { text: '请选择', value: -1 }, // 陈列方式
        salesType: { text: '请选择', value: -1 }, // 促销类型
        submitHoro: { text: '请选择', value: -1 }, // 提交总部
        displayStatus: { text: '请选择', value: -1 }// 商品状态
      },

      searchGoodsNamDataBuffer: {},


      pageData: {
        pageNo: 1,
        pageSize: 10
      },

      dialogData: {},

      historyData: {},

      infoData: {},



      customData: {
        type: 0, // 当前栏目（0待跟进，1跟进中，2全部）
        typeObject: null, // 状态 查询条件
        countShow: false,
        deptNbrList: [], // 部门编号
        fixtureModeList: [], // 陈列方式
        salesTypeList: [
          {
            text: '请选择',
            value: -1
          },
          {
            text: '彩页封面放大',
            value: '彩页封面放大'
          },
          {
            text: 'PG拳头商品',
            value: 'PG拳头商品'
          },
          {
            text: 'NLP商品',
            value: 'NLP商品'
          },
          {
            text: 'SWF商品',
            value: 'SWF商品'
          }
        ], // 促销类型
        submitHoroList: [
          {
            text: '请选择',
            value: -1
          },
          {
            text: '未提交',
            value: 0
          },
          {
            text: '已提交',
            value: 1
          }
        ], // 提交总部
        displayStatusList: [
          {
            text: '请选择',
            value: -1
          },
          {
            text: '待分配',
            value: 0
          },
          {
            text: '未陈列',
            value: 1
          },
          {
            text: '已陈列',
            value: 2
          },
          {
            text: '无法陈列',
            value: 3
          },
          {
            text: '拍照商品',
            value: 4
          },
          {
            text: '全部',
            value: 5
          }
        ]// 状态
      },

      PageStatus: 1,
      departItemsDTOList: [], // 已经选择的部门
      addgoodsShow: false,
      chooseUserShow: false
    }
  },



  mounted() {
    const self = this
    self.customData.initParams = self.$route.params
    self.searchGoodsNamDataBuffer = JSON.parse(sessionStorage.searchGoodsNamData)
    // 跳转过来的类型
    self.searchGoodsObjData.chooseType = self.searchGoodsNamDataBuffer.chooseType
    // 跳转过来的商品名称
    self.searchGoodsObjData.goodsName = self.searchGoodsNamDataBuffer.goodsName
    // 跳转过来的商品审核状态
    const auditStatusStatusData = {}
    if (_validate.checkEmpty(self.searchGoodsNamDataBuffer.auditStatus)) {
      self.searchGoodsObjData.auditStatus = { text: '请选择', value: -1 }
    } else {
      switch (parseInt(self.searchGoodsNamDataBuffer.auditStatus)) {
        case 1:
          auditStatusStatusData.text = '未审核'
          auditStatusStatusData.value = 1
          break
        case 2:
          auditStatusStatusData.text = '已审核'
          auditStatusStatusData.value = 2
          break
      }
      self.searchGoodsObjData.auditStatus = auditStatusStatusData
    }
    // 跳转过来的商品状态
    const displayStatusData = {}
    if (_validate.checkEmpty(self.searchGoodsNamDataBuffer.displayStatus)) {
      displayStatusData.text = '全部'
      displayStatusData.value = 5
      self.searchGoodsObjData.displayStatus = displayStatusData
    } else {
      switch (parseInt(self.searchGoodsNamDataBuffer.displayStatus)) {
        case 0:
          displayStatusData.text = '待分配'
          displayStatusData.value = 0
          break
        case 1:
          displayStatusData.text = '未陈列'
          displayStatusData.value = 1
          break
        case 2:
          displayStatusData.text = '已陈列'
          displayStatusData.value = 2
          break
        case 3:
          displayStatusData.text = '无法陈列'
          displayStatusData.value = 3
          break
        case 4:
          displayStatusData.text = '拍照商品'
          displayStatusData.value = 4
          break
      }
      self.searchGoodsObjData.displayStatus = displayStatusData
    }
    self.onInit()
  },
  methods: {
    onInit() {
      const self = this
      const data = {
        displayStatus: self.searchGoodsNamDataBuffer.displayStatus, // (integer, optional): 商品状态(0 待分配、1 未陈列、 2 已陈列、3 无法陈列 4.拍照 ,全部的话这个字段不用传) ,
        storeId: JSON.parse(sessionStorage.getItem('context')).storeId, //  (integer, optional): 门店ID ,
        taskId: sessionStorage.getItem('taskId')//  (integer, optional): 任务ID
      }
      if (self.searchGoodsNamDataBuffer.chooseType == 1) {
        data.executionId = sessionStorage.getItem('executionId')
      }
      _taskstoreitemapi.getdata(self, data, self.callBack_onInit)
    },
    onSearch() {},
    onChangePage() {},
    onReset() {},
    ONadd() {},
    onDelete(data) {},
    onInfo(data) {},
    onUpdate(data) {},
    onBathDelete() {},
    onBathUpdate() {},
    onDisable(data) {},
    onEnable(data) {},
    onUpload() {},
    onBathUpload() {},
    onExport() {},
    onDownload() {},
    onHistory() {},
    callBack_onInit(data) {
      const self = this
      if (_validate.checkEmpty(data.deptNbrList)) {
        self.customData.deptNbrList = [{ text: '请选择', value: -1 }]// 部门类型
      } else {
        self.customData.deptNbrList = _tools.pickDataList(data.deptNbrList)// 部门类型
      }
      if (_validate.checkEmpty(data.fixtureModeList)) {
        self.customData.fixtureModeList = [{ text: '请选择', value: -1 }]// 部门类型
      } else {
        self.customData.fixtureModeList = _tools.pickDataList(data.fixtureModeList)// 部门类型
      }
    },
    getDepartItemsList(val) {
      const self = this
      self.addgoodsShow = false
      self.tableData.taskAddExecutionForm.departItemsDTOList = []
      let cont = 0
      val.map(item => {
        self.tableData.taskAddExecutionForm.departItemsDTOList.push(item)
        cont = cont + item.itemsNum
      })
      self.tableData.taskAddExecutionForm.itemsTotal = cont
      self.departItemsDTOList = val
      document.documentElement.style.overflow = 'scroll'
    },
    // 关闭选择添加部门的插件
    setcancles(val) {
      const self = this
      self.addgoodsShow = false
      document.documentElement.style.overflow = 'scroll'
    },
    close() {
      this.show = false
    },
    // 确定选项
    confirmFn(val) {
      this.show = false
      switch (this.customData.type) {
        case 1:
          this.searchGoodsObjData.deptNbr = val.select1
          break
        case 2:
          this.searchGoodsObjData.fixtureMode = val.select1
          break
        case 3:
          this.searchGoodsObjData.salesType = val.select1
          break
        case 4:
          this.searchGoodsObjData.submitHoro = val.select1
          break
        case 5:
          this.searchGoodsObjData.displayStatus = val.select1
          break
      }
    },
    setStatus(value) {
      const self = this
      self.customData.type = value
      self.show = true
      self.columns = 1
      self.link = false
      self.defaultData = []
      switch (this.customData.type) {
        case 1:
          self.pickData.data1 = self.customData.deptNbrList
          if (!_validate.checkEmpty(self.searchGoodsObjData.deptNbr)) {
            self.defaultData.push(self.searchGoodsObjData.deptNbr)
          }
          break
        case 2:
          self.pickData.data1 = self.customData.fixtureModeList
          if (!_validate.checkEmpty(self.searchGoodsObjData.fixtureMode)) {
            self.defaultData.push(self.searchGoodsObjData.fixtureMode)
          }
          break
        case 3:
          self.pickData.data1 = self.customData.salesTypeList
          if (!_validate.checkEmpty(self.searchGoodsObjData.salesType)) {
            self.defaultData.push(self.searchGoodsObjData.salesType)
          }
          break
        case 4:
          self.pickData.data1 = self.customData.submitHoroList
          if (!_validate.checkEmpty(self.searchGoodsObjData.submitHoro)) {
            self.defaultData.push(self.searchGoodsObjData.submitHoro)
          }
          break
        case 5:
          self.pickData.data1 = self.customData.displayStatusList
          if (!_validate.checkEmpty(self.searchGoodsObjData.displayStatus)) {
            self.defaultData.push(self.searchGoodsObjData.displayStatus)
          }
          break
      }
    },
    // 确定搜索
    search() {
      const self = this
      if (_validate.checkEmpty(self.searchGoodsObjData.deptNbr) || self.searchGoodsObjData.deptNbr.value == -1) {
        self.searchResultvData.deptNbr = ''// 部门
      } else {
        self.searchResultvData.deptNbr = self.searchGoodsObjData.deptNbr.value// 部门
      }
      if (_validate.checkEmpty(self.searchGoodsObjData.fixtureMode) || self.searchGoodsObjData.fixtureMode.value == -1) {
        self.searchResultvData.fixtureMode = ''// 陈列方式
      } else {
        self.searchResultvData.fixtureMode = self.searchGoodsObjData.fixtureMode.value// 陈列方式
      }
      if (_validate.checkEmpty(self.searchGoodsObjData.salesType) || self.searchGoodsObjData.salesType.value == -1) {
        self.searchResultvData.salesType = ''// 促销类型
      } else {
        self.searchResultvData.salesType = self.searchGoodsObjData.salesType.value// 促销类型
      }
      if (_validate.checkEmpty(self.searchGoodsObjData.submitHoro) || self.searchGoodsObjData.submitHoro.value == -1) {
        self.searchResultvData.submitHoro = ''// 提交总部
      } else {
        self.searchResultvData.submitHoro = self.searchGoodsObjData.submitHoro.value// 提交总部
      }
      if (_validate.checkEmpty(self.searchGoodsObjData.displayStatus) || self.searchGoodsObjData.displayStatus.value == -1 || self.searchGoodsObjData.displayStatus.value == 5) {
        self.searchResultvData.displayStatus = ''// 商品状态
      } else {
        self.searchResultvData.displayStatus = self.searchGoodsObjData.displayStatus.value// 商品状态
      }
      if (_validate.checkEmpty(self.searchGoodsObjData.auditStatus) || self.searchGoodsObjData.auditStatus.value == -1) {
        self.searchResultvData.auditStatus = ''// 审核状态
      } else {
        self.searchResultvData.auditStatus = self.searchGoodsObjData.auditStatus.value// 审核状态
      }
      self.searchResultvData.goodsName = self.searchGoodsObjData.goodsName
      self.searchResultvData.serialNbr = self.searchGoodsObjData.serialNbr

      if (self.searchGoodsObjData.chooseType == 1) {
        sessionStorage.searchGoodsNamData = JSON.stringify(self.searchResultvData)
        this.$router.push('task_implementMatterPlaybookInfo')
      } else {
        sessionStorage.searchGoodsNamData = JSON.stringify(self.searchResultvData)
        this.$router.push('task_goodsList')
      }
    },
    reset() {
      const self = this
      self.searchGoodsObjData.goodsName = '' // 商品名称
      self.searchGoodsObjData.deptNbr = { text: '请选择', value: -1 }// 部门
      self.searchGoodsObjData.serialNbr = '' // 序号
      self.searchGoodsObjData.fixtureMode = { text: '请选择', value: -1 }// 陈列方式
      self.searchGoodsObjData.salesType = { text: '请选择', value: -1 }// 促销类型
      self.searchGoodsObjData.submitHoro = { text: '请选择', value: -1 }// 提交总部
      const auditStatusStatusData = {}
      if (_validate.checkEmpty(self.searchGoodsNamDataBuffer.auditStatus)) {
        self.searchGoodsObjData.auditStatus = { text: '请选择', value: -1 }
      } else {
        switch (parseInt(self.searchGoodsNamDataBuffer.auditStatus)) {
          case 1:
            auditStatusStatusData.text = '未审核'
            auditStatusStatusData.value = 1
            break
          case 2:
            auditStatusStatusData.text = '已审核'
            auditStatusStatusData.value = 2
            break
        }
        self.searchGoodsObjData.auditStatus = auditStatusStatusData
      }
      // 跳转过来的商品状态
      const displayStatusData = {}
      if (_validate.checkEmpty(self.searchGoodsNamDataBuffer.displayStatus)) {
        displayStatusData.text = '全部'
        displayStatusData.value = 5
        self.searchGoodsObjData.displayStatus = displayStatusData
      } else {
        switch (parseInt(self.searchGoodsNamDataBuffer.displayStatus)) {
          case 0:
            displayStatusData.text = '待分配'
            displayStatusData.value = 0
            break
          case 1:
            displayStatusData.text = '未陈列'
            displayStatusData.value = 1
            break
          case 2:
            displayStatusData.text = '已陈列'
            displayStatusData.value = 2
            break
          case 3:
            displayStatusData.text = '无法陈列'
            displayStatusData.value = 3
            break
          case 4:
            displayStatusData.text = '拍照商品'
            displayStatusData.value = 4
            break
        }
        self.searchGoodsObjData.displayStatus = displayStatusData
      }
    }
  }
}
</script>
<style scoped>
.home {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
}
.search {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  margin-top: 15px;
  background: #ffffff;
}
.searchbtn {
  width: 100%;
  height: 32px;
  position: relative;
  margin-bottom: 15px;
}
.searchbtn input {
  border: none;
  width: 100%;
  height: 32px;
  background: rgba(238, 238, 238, 1);
  border-radius: 16px;
  box-sizing: border-box;
  padding: 0 16px;
  padding-left: 45px;
}
.searchbtn img {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
}
.info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-self: center;
  flex-wrap: nowrap;
  padding: 14px 0;
  border-bottom: 1px solid #e0e0e0;
}
.info:last-child {
  border: none;
}
.info h1 {
  width: 110px;
  font-size: 17px;
  font-weight: 400;
}
.info .right {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.info .right span {
  display: inline-block;
  width: 90%;
}
.info .right input {
  border: none;
}
.submit {
  width: 100%;
  margin-top: 10px;
}
.submit .el-col {
  text-align: center;
}
.btn {
  width: 165px;
  height: 40px;
  background: rgba(0, 113, 206, 1);
  border-radius: 25px;
  margin: 30px auto;
  color: #fff;
  text-align: center;
  line-height: 40px;
  margin: 0px;
  padding: 0px;
}
.btn_reset {
  background: #e4e7ed;
  color: #606266;
}
.xh p {
  width: 60px;
  flex: none;
  line-height: 30px;
}
.xh .el-input {
  flex: 1;
}
</style>
